<template>
  <div class="quick_entry_div" v-if="!span_count == 0 && quick_data && quick_data.length != 0">
    <!-- 快捷入口 -->
    <van-row>
      <!-- 全部角色 -->
      <van-col :span="span_count" v-for="(item,index) of quick_data" :key="index" @click="quick_item_click(item.link_url)">
        <div class="quick_div">
          <!-- 图标图片 -->
          <div class="quick_icon">
            <img :src="getImgPath + item.img_path">
          </div>
           <!-- 图标文字 -->
          <div class="quick_font">
            {{item.quick_font}}
          </div>
        </div>
      </van-col>
  </van-row>
  </div>
</template>
<script>
import {mapGetters} from "vuex"
export default {
  name:"QuickEntry",
  props:["quick_data"],
  data() {
    return {
      span:0
    }
  },
  methods: {
    // 快捷入口跳转
    quick_item_click(link_url){
      if(!link_url) return;
      this.$router.push(link_url);
    }
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    }),
    // 计算 span 的值
    span_count(){
      // 有值 则 计算
      if(!this.quick_data) return;
      return 24 / this.quick_data.length;
    }
  },

}
</script>
<style lang="less" scoped>
  .quick_entry_div{
    height: 0rem;
    overflow: hidden;
    padding-bottom: 0.85rem;
    width: 100%;
    background-color: #ffffff;
  }
  .quick_icon{
    font-size: 0rem;
    width: 0.44rem;
    height: 0.44rem;
    margin: 0 auto;
    img{
      width: 100%;
    }
  }
  .quick_div{
    text-align: center;
    padding:0.1rem 0.2rem
  }
  .quick_font{
    font-size: 0.12rem;
    margin-top: 0.05rem;
    color: #1E1E1E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>